import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import Inspector from "vite-plugin-vue-inspector";
import autoprefixer from "autoprefixer";  
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import tailwindcss from "tailwindcss";
import postcsspxtoviewport from "postcss-px-to-viewport";

import path from "path";
export default defineConfig(({ command, mode }) => {
  const envDir: string = path.resolve(__dirname, `./env/${process.env.PROJECT}`); // 设置环境变量的目录
  const envPrefix: string = "VITE_"; // 设置环境变量的前缀，暴露import.meta.env.VITE_BASEURL使用
  const env = loadEnv(mode, envDir, envPrefix); // 获取环境变量
  const { VITE_PHONE } = env;
  console.log('VITE_PHONE:', VITE_PHONE); // 打印 VITE_PHONE 的值
  
  return {
    plugins: [
      vue(),
      Inspector(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    css: {
      postcss: {
        plugins: [
          ...(VITE_PHONE === "true"
            ? [
                postcsspxtoviewport({
                  unitToConvert: "px",
                  viewportWidth: 375,
                  unitPrecision: 6,
                  propList: ["*"],
                  viewportUnit: "vw",
                  fontViewportUnit: "vw",
                  selectorBlackList: ["ignore-"],
                  minPixelValue: 1,
                  mediaQuery: true,
                  replace: true,
                  landscape: false,
                }),
              ]
            : []),
          autoprefixer,
          tailwindcss,
        ],
      },
    },
    server: {
      port: 3000,
      host: true,
      cors: true,
      open: true,
      proxy: {
        "/api": {
          target: "http://localhost:8080",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  };
});